<template>
  <div class="gov-dynamic-form">
    <div class="form-item-wrapper" v-for="(arr, index) in list" :key="index">
      <div class="form-item" v-for="item in arr" :key="item.eicCode">
        <div class="form-item-content">
          <div class="form-item-content__label" :class="{ 'form-item-content__error': !rules[item.eicCode] }">
            {{ item.eicName }}
            <span class="promet" v-if="item.eicFillRule === 'Y'">(*)</span>
          </div>
          <!-- 查看 -->
          <div class="form-item-content__input" v-if="handleType === 'scan'">
            <!-- 多选 -->
            <checkbox
              v-if="item.eicType === 'checkbox_short' || item.eicType === 'checkbox_long'"
              :action="item"
              :handleType="handleType"
              @selectChange="selectChange"
              :selected="form[item.eicCode]"
            />
            <!-- 多选 -->
            <!-- 输入框(数字、文本、文本域) -->
            <span
              class="scan-text"
              v-else-if="item.eicType === 'input' || item.eicType === 'inputnumber' || item.eicType === 'textarea'"
            >
              {{ form[item.eicCode] }}
            </span>
            <!-- 输入框(数字、文本、文本域) -->
            <!-- 单选 -->
            <radio
              v-else-if="item.eicType === 'radio_short' || item.eicType === 'radio_long'"
              @selectChange="selectChange"
              :handleType="handleType"
              :action="item"
              :selected="form[item.eicCode]"
            />
            <!-- 单选 -->
            <!-- 日期 -->
            <span class="scan-text" v-else-if="item.eicType === 'date'">{{ form[item.eicCode] }}</span>
            <!-- 日期 -->
            <!-- 日期段 -->
            <el-date-picker
              v-else-if="item.eicType === 'datepicker'"
              v-model="form[item.eicCode]"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
            <!-- 日期段 -->
            <!-- 上传 -->
            <upload
              v-else-if="item.eicType === 'upload'"
              :selected="form[item.eicCode]"
              :handleType="handleType"
              @selectChange="selectChange"
              :action="item"
            />
            <!-- 上传 -->
            <!-- 复选输入框 -->
            <checkboxInput
              @selectChange="selectChange"
              :selected="form[item.eicCode]"
              :handleType="handleType"
              :action="item"
              v-else-if="item.eicType === 'checkbox_input'"
            />
            <!-- 复选输入框 -->
            <!-- 材料申请 审核要点 -->
            <customList
              @selectChange="selectChange"
              :selected="form[item.eicCode]"
              :action="item"
              :handleType="handleType"
              v-else-if="item.eicType === 'custom_list'"
            />
            <!-- 材料申请 审核要点 -->
            <!-- 级联选择 -->
            <cascaderDepart
              @selectChange="selectChange"
              :selected="form[item.eicCode]"
              :handleType="handleType"
              :action="item"
              v-else-if="item.eicType === 'cascader'"
            />
            <!-- 级联选择 -->
          </div>
          <!-- 查看 -->
          <!-- 编辑 -->
          <div class="form-item-content__input" v-else>
            <!-- 多选 -->
            <checkbox
              v-if="item.eicType === 'checkbox_short' || item.eicType === 'checkbox_long'"
              :action="item"
              @selectChange="selectChange"
              :selected="form[item.eicCode]"
            />
            <!-- 多选 -->
            <!-- 输入框(文本、文本域) -->
            <el-input
              v-else-if="item.eicType === 'input' || item.eicType === 'textarea'"
              v-model="form[item.eicCode]"
              :maxlength="item.eicLength"
              :type="item.eicType"
              placeholder="请输入内容"
            ></el-input>
            <!-- 输入框(文本、文本域) -->
            <!-- 输入框(数字) -->
            <el-input
              type="number"
              v-else-if="item.eicType === 'inputnumber'"
              v-model.number="form[item.eicCode]"
              placeholder="请输入内容"
              onKeypress="return (/[\d\.]/.test(String.fromCharCode(event.keyCode)))"
            />
            <!-- 输入框(数字) -->
            <!-- 单选 -->
            <radio
              v-else-if="item.eicType === 'radio_short' || item.eicType === 'radio_long'"
              @selectChange="selectChange"
              :action="item"
              :selected="form[item.eicCode]"
            />
            <!-- 单选 -->
            <!-- 日期 -->
            <el-date-picker
              v-else-if="item.eicType === 'date'"
              v-model="form[item.eicCode]"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
            <!-- 日期 -->
            <!-- 日期段 -->
            <el-date-picker
              v-else-if="item.eicType === 'datepicker'"
              v-model="form[item.eicCode]"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
            <!-- 日期段 -->
            <!-- 上传 -->
            <upload
              v-else-if="item.eicType === 'upload'"
              :selected="form[item.eicCode]"
              @selectChange="selectChange"
              :action="item"
            />
            <!-- 上传 -->
            <!-- 复选输入框 -->
            <checkboxInput
              @selectChange="selectChange"
              :selected="form[item.eicCode]"
              :action="item"
              v-else-if="item.eicType === 'checkbox_input'"
            />
            <!-- 复选输入框 -->
            <!-- 材料申请 审核要点 -->
            <customList
              @selectChange="selectChange"
              :selected="form[item.eicCode]"
              :action="item"
              v-else-if="item.eicType === 'custom_list'"
            />
            <!-- 材料申请 审核要点 -->
            <!-- 级联选择 -->
            <cascaderDepart
              @selectChange="selectChange"
              :selected="form[item.eicCode]"
              :handleType="handleType"
              :action="item"
              v-else-if="item.eicType === 'cascader'"
            />
            <!-- 级联选择 -->
          </div>
          <!-- 编辑 -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import checkbox from './checkbox';
  import radio from './radio';
  import checkboxInput from './checkboxInput';
  import upload from './upload';
  import customList from './customList';
  import cascaderDepart from './cascaderDepart';

  export default {
    components: {
      checkbox,
      upload,
      radio,
      checkboxInput,
      customList,
      cascaderDepart
    },
    props: {
      // clone克隆、edit编辑、scan查看
      handleType: {
        type: String
      },
      formItemData: {
        type: Array,
        default: () => {
          return [];
        }
      },
      formItemValue: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        list: [],
        rules: {},
        form: {}
      };
    },
    watch: {
      formItemValue: {
        handler(newVal, oldVal) {
          if (newVal) {
            this.setValue();
          }
        },
        immediate: true
      }
    },
    computed: {},
    methods: {
      selectChange(obj) {
        this.form[obj.eicCode] = obj.value;
      },
      init() {
        // 同行的字段
        let hasGroup = {};
        // 不同行的字段
        let noGroup = {};
        // 按照order排序
        this.formItemData.sort((a, b) => {
          return a.eicOrder - b.eicOrder;
        });
        this.formItemData.forEach((e) => {
          // 动态设置表单字段
          const { eicCode, eicOrder } = e;

          // 增加验证
          this.$set(this.rules, eicCode, true);

          if (e.eicGroup) {
            hasGroup[eicOrder] = e;
          } else {
            noGroup[eicOrder] = [];
            noGroup[eicOrder].push(e);
          }
        });

        for (let key in hasGroup) {
          let item = hasGroup[key];
          const order = item.eicGroup;
          noGroup[order] = noGroup[order] || [];
          noGroup[order].push(item);
        }

        let newList = [];
        for (let key in noGroup) {
          newList.push(noGroup[key]);
        }

        this.list = newList;
      },
      setValue() {
        this.formItemData.forEach((e) => {
          // 动态设置表单字段
          const { eicType, eicCode } = e;
          const value = this.formItemValue[eicCode];
          let initVal;
          if (value || value === 0) {
            if (
              eicType === 'checkbox_short' ||
              eicType === 'checkbox_long' ||
              eicType === 'checkbox_input' ||
              eicType === 'datepicker' ||
              eicType === 'upload'
            ) {
              initVal = JSON.parse(value);
            } else {
              initVal = value;
            }
          } else {
            if (
              eicType === 'checkbox_short' ||
              eicType === 'checkbox_long' ||
              eicType === 'upload' ||
              eicType === 'custom_list'
            ) {
              initVal = [];
            } else if (eicType === 'checkbox_input') {
              initVal = {};
            } else {
              initVal = '';
            }
          }
          this.$set(this.form, eicCode, initVal);
        });
      },
      // 获取form数据, isValid是否需要验证，暂存不验证，提交验证
      getFormData(isValid) {
        // 验证
        let valid = true;
        const formData = {};
        this.formItemData.forEach((e) => {
          const { eicCode, eicFillRule, eicType, regularVal } = e;
          let value = this.form[eicCode];
          let isRequired = eicFillRule === 'Y';
          let rules;
          if (this.isNull(value)) {
            // 必填的验证
            if (isRequired && isValid) {
              rules = false;
              valid = false;
            } else {
              rules = true;
            }
          } else {
            // 正则的验证
            if (isValid && regularVal && !new RegExp(regularVal).test(value)) {
              rules = false;
              valid = false;
            } else {
              // 根据类型存值
              if (eicType === 'date') {
                value = this.$moment(value).format('YYYY-MM-DD');
              } else if (
                eicType === 'checkbox_short' ||
                eicType === 'checkbox_long' ||
                eicType === 'checkbox_input' ||
                eicType === 'datepicker' ||
                eicType === 'upload'
              ) {
                value = JSON.stringify(value);
              }

              formData[eicCode] = value;
              rules = true;
            }
          }

          this.rules[eicCode] = rules;
        });

        return {
          valid,
          data: formData
        };
      },
      // 对该表单项进行重置，将其值重置为初始值并移除校验结果
      resetField() {
        for (let key in this.form) {
          const value = this.form[key];
          if (Object.prototype.toString.call(value) === '[object Array]') {
            this.form[key] = [];
          } else if (Object.prototype.toString.call(value) === '[object Object]') {
            this.form[key] = {};
          } else {
            this.form[key] = '';
          }
          this.rules[key] = true;
        }
      },
      // 判断值是否为空
      isNull(value) {
        if (
          (Object.prototype.toString.call(value) === '[object Array]' && value.length === 0) ||
          (Object.prototype.toString.call(value) === '[object Object]' && JSON.stringify(value) === '{}') ||
          value === ''
        ) {
          return true;
        } else {
          return false;
        }
      }
    },
    created() {},
    mounted() {
      this.init();
    }
  };
</script>
<style lang="scss">
  .gov-dynamic-form {
    .form-item-wrapper {
      display: flex;
      .form-item {
        flex: 1;
        display: flex;
        &-content {
          flex: 1;
          display: flex;
          &__error {
            color: red;
          }
          &__label {
            width: 140px;
            display: flex;
            align-items: center;
            padding-right: 10px;
            justify-content: flex-end;
            background-color: #ebf0f5;
            border-bottom: 1px solid #e4e4e4;
            border-left: 1px solid #e4e4e4;
            border-top: 1px solid #e4e4e4;
            .promet {
              color: red;
            }
          }
          .scan-text {
            display: inline-block;
            padding: 10px;
            height: 14px;
          }
          &__input {
            flex: 1;
            display: flex;
            align-items: center;
            border: 1px solid #e4e4e4;
            .el-radio-group {
              .el-radio {
                padding: 10px;
              }
            }
            .el-radio-group__mul {
              display: flex;
              flex-direction: column;
              width: 100%;
              .el-radio {
                padding: 10px;
                border-bottom: 1px solid #e4e4e4;
              }
            }
            input {
              border: 0;
            }

            .el-date-editor.el-input,
            .el-date-editor {
              width: 100%;
            }
          }
        }
      }
    }
  }
</style>
